<template>
  <div class="box">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home/index/index' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/test' }">试题管理</el-breadcrumb-item>
        <el-breadcrumb-item><a href="/test/testadd">添加试题</a></el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-scrollbar height="90%">
      <el-skeleton :rows="5" :loading="Loadings" animated>
        <div v-loading="loading" class="testadd">
          <div class="title">
            <span>添加试题</span>
          </div>
          <div class="add">
            <el-upload multiple accept=".xls,.xlsx" :limit="3">
              <el-button type="primary">批量导入</el-button>
            </el-upload>
          </div>
          <el-tabs type="border-card">
            <!-- 单选题 -->
            <el-tab-pane label="单选题">
              <el-form label-width="120px">
                <el-form-item label="题干">
                  <el-input v-model="from.Rname" />
                </el-form-item>

                <el-form label-width="120px" v-for="(item, index) in options" :key="index">
                  <el-form-item :label="item.label">
                    <el-input v-model="item.content" />
                  </el-form-item>
                </el-form>

                <div class="btn">
                  <el-button @click="addinput" type="success" plain>多一个</el-button>
                  <el-button @click="deleteinput" type="primary" plain>少一个</el-button>
                </div>
                <el-form-item label="试题标签">
                  <el-select v-model="from.Rtype" placeholder="请选择标签">
                    <el-option label="Java" value="Java" />
                    <el-option label=".Net" value=".Net" />
                  </el-select>
                </el-form-item>
                <el-form-item label="正确选项">
                  <el-radio-group v-model="from.Rresource" @change="Change" v-for="(item, index) in options"
                    :key="index">
                    <el-radio :label="item.label" />
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="试题等级">
                  <div class="demo-rate-block">
                    <el-rate :max="10" v-model="from.Rtestlv" />
                  </div>
                </el-form-item>
                <el-form-item label="描述">
                  <el-input v-model="from.Rdescribe" type="textarea" />
                </el-form-item>
                <el-button type="primary" style="float: right" plain @click="Rsave">保存</el-button>
              </el-form>
            </el-tab-pane>
            <!-- 单选题 -->
            <!-- 多选题 -->
            <el-tab-pane label="多选题">
              <el-form label-width="120px">
                <el-form-item label="题干">
                  <el-input v-model="from.Cname" />
                </el-form-item>

                <el-form label-width="120px" v-for="(item, index) in multipleoptions" :key="index">
                  <el-form-item :label="item.label">
                    <el-input v-model="item.content" />
                  </el-form-item>
                </el-form>
                <div class="btn">
                  <el-button @click="addinputs" type="success" plain>多一个</el-button>
                  <el-button @click="deleteinputs" type="primary" plain>少一个</el-button>
                </div>
                <el-form-item label="试题标签">
                  <el-select v-model="from.CType" placeholder="请选择标签">
                    <el-option label="Java" value="Java" />
                    <el-option label=".Net" value=".Net" />
                  </el-select>
                </el-form-item>
                <el-form-item label="正确选项">
                  <el-checkbox-group v-model="mulitipleRight" v-for="(item, index) in multipleoptions"
                    @change="Changes">
                    <el-checkbox v-model="from.Cresource" :label="item.label" />
                  </el-checkbox-group>
                </el-form-item>


                <el-form-item label="试题等级">
                  <div class="demo-rate-block">
                    <el-rate :max="10" v-model="from.Ctestlv" />
                  </div>
                </el-form-item>
                <el-form-item label="描述">
                  <el-input v-model="from.Cdescribe" type="textarea" />
                </el-form-item>
                <el-button type="primary" style="float: right" plain @click="Csave">保存</el-button>
              </el-form>
            </el-tab-pane>
            <!-- 多选题 -->
            <el-tab-pane label="问答题">
              <el-form label-width="120px">
                <el-form-item label="题干">
                  <el-input v-model="from.Ename" type="textarea" />
                </el-form-item>
                <el-form-item label="试题标签">
                  <el-select v-model="from.EType" placeholder="请选择试题标签">
                    <el-option label="Java" value="Java" />
                    <el-option label=".Net" value=".Net" />
                  </el-select>
                </el-form-item>
                <el-form-item label="试题等级">
                  <div class="demo-rate-block">
                    <el-rate :max="10" v-model="from.Etestlv" />
                  </div>
                </el-form-item>
                <el-form-item label="参考答案">
                  <el-input v-model="from.answer" type="textarea" />
                </el-form-item>
                <el-form-item label="解析">
                  <el-input v-model="from.analysis" type="textarea" />
                </el-form-item>
                <el-form-item label="描述">
                  <el-input v-model="from.Edescribe" type="textarea" />
                </el-form-item>
                <el-button type="primary" style="float: right" plain @click="Esave">保存</el-button>
              </el-form>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-skeleton>
    </el-scrollbar>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, ref, onMounted } from "vue";
import { TestAdd, IOption } from "@/utils/Exam/test/testadd";
import { ElMessage, ElMessageBox } from "element-plus";
import { Question } from "@/api/Product/exaam";
import router from "@/router";

const question = new Question();
export default defineComponent({
  setup() {
    const data = reactive<TestAdd>({
      loading: false,
      Loadings: true,
      from: {
        Rname: "",
        Cname: "",
        Ename: "",
        grade: 0,
        Rtestlv: 0,
        Ctestlv: 0,
        Etestlv: 0,
        Rtype: "",
        CType: "",
        EType: "",
        option: [],
        option2: [],
        Rresource: "",
        Cresource: "",
        Rdescribe: "",
        Cdescribe: "",
        answer: "",
        analysis:"",
        Edescribe: "",
      },
      option: [
        {
          ocontent: "选项1",
          oisRight: false
        },
        {
          ocontent: "选项2",
          oisRight: true
        },
        {
          ocontent: "选项3",
          oisRight: false
        },
        {
          ocontent: "选项4",
          oisRight: false
        },
      ],
      options: [
        {
          label: "选项1",
          content: ''
        },
        {
          label: "选项2",
          content: ''
        },
        {
          label: "选项3",
          content: ''
        },
        {
          label: "选项4",
          content: ''
        },
      ],
      multipleoption: [
        {
          ocontent: "选项1",
          oisRight: false
        },
        {
          ocontent: "选项2",
          oisRight: true
        },
        {
          ocontent: "选项3",
          oisRight: false
        },
        {
          ocontent: "选项4",
          oisRight: false
        },
      ],
      multipleoptions: [
        {
          label: "选项1",
          content: ''
        },
        {
          label: "选项2",
          content: ''
        },
        {
          label: "选项3",
          content: ''
        },
        {
          label: "选项4",
          content: ''
        },
      ],
      
    });
     let nameList: any = [
      "唐香菱",
      "唐舞",
      "唐瀚钰",
      "唐雨凝",
      "唐巧风",
      "唐芷波",
      "唐英耀",
      "唐清晖",
      "唐和韵",
      "唐奇胜",
      "唐星光",
      "唐亦旋",
      "唐乐儿",
      "唐慧云",
      "唐沛凝",
      "唐美华",
      "唐和通",
      "唐英飙",
      "唐藏",
      "唐梦竹",
      "唐思博",
      "唐海亦",
      "唐梅",
      "唐拔",
      "唐良平",
      "唐珠轩",
      "唐俊语",
      "唐方仪",
      "唐香岚",
      "唐千秋",
      "唐灵安",
      "唐醉巧",
      "唐可",
      "唐尚",
      "唐新雅",
      "唐典",
      "唐芷珊",
      "唐玉成",
      "唐蓓",
      "唐朋兴",
      "唐含文",
      "唐晓筠",
      "唐瑶瑾",
      "唐旻骞",
      "唐高峯",
      "唐芝兰",
      "唐柔",
      "唐嘉树",
      "唐维",
      "唐任真",
      "唐妙颜",
      "唐谷雪",
      "唐寻绿",
      "唐小蕾",
      "唐燕岚",
      "唐灵波",
      "唐初之",
      "唐婷美",
      "唐端丽",
      "唐姿",
      "唐音景",
      "唐天和",
      "唐含巧",
      "唐冷梅",
      "唐新蕾",
      "唐月灵",
      "唐恬谧",
      "唐双",
      "唐星河",
      "唐傲薇",
      "唐和雅",
      "唐璇珠",
      "唐驰雪",
      "唐骊蓉",
      "唐星菱",
      "唐思萌",
      "唐冰菱",
      "唐祺",
      "唐秋珊",
      "唐鑫鹏",
      "唐巧",
      "唐书君",
      "唐红",
      "唐高寒",
      "唐越泽",
      "唐润丽",
      "唐泽惠",
      "唐觅双",
      "唐壮",
      "唐丝",
      "唐君",
      "唐俊逸",
      "唐颖然",
      "唐雅美",
      "唐蓝",
      "唐驰轩",
      "唐文斌",
      "唐嘉容",
      "唐笑妍",
      "唐宛妙",
      "唐箫,",
      "唐夏蓉",
      "唐宏义",
      "唐易绿",
      "唐新林",
      "唐晓曼",
      "唐凌波",
      "唐生,",
      "唐冰绿",
      "唐映萱",
      "唐春柏",
      "唐永贞",
      "唐秀越",
      "唐流婉",
      "唐运升",
      "唐采白",
      "唐尔烟",
      "唐语梦",
      "唐芷荷",
      "唐海儿",
      "唐宛曼",
      "唐乐池",
      "唐俊晤",
      "唐颖慧",
      "唐彭越",
      "唐清秋",
      "唐惜珊",
      "唐香薇",
      "唐宏才",
      "唐凌丝",
      "唐雅珺",
      "唐易文",
      "唐丽玉",
      "唐嘉懿",
      "唐心思",
      "唐雨泽",
      "唐珉瑶",
      "唐耘志",
      "唐浩涆",
      "唐才,",
      "唐嘉丽",
      "唐代秋",
      "唐振平",
      "唐梓楠",
      "唐婉容",
      "唐文敏",
      "唐温文",
      "唐鸣,",
      "唐浩邈",
      "唐玉石",
      "唐映雪",
      "唐鹏飞",
      "唐颜,",
      "唐绣梓",
      "唐初兰",
      "唐弘博",
      "唐书,",
      "唐宏恺",
      "唐冰蝶",
      "唐飞虎",
      "唐惜香",
      "唐胤,",
      "唐晗蕊",
      "唐芳洲",
      "唐佑运",
      "唐金,",
      "唐德运",
      "唐长文",
      "唐孟,",
      "唐诗双",
      "唐曼容",
      "唐婵,",
      "唐鸿信",
      "唐霞月",
      "唐真,",
      "唐悦欣",
      "唐芳荃",
      "唐睿慈",
      "唐怀柔",
      "唐雨双",
      "唐蕴,",
      "唐初,",
      "唐芷烟",
      "唐初柳",
      "唐智晖",
      "唐优悠",
      "唐幼枫",
      "唐昊硕",
      "唐怡宁",
      "唐君婷",
      "唐思萱",
      "唐燕桦",
      "唐骏奇",
      "唐冷萱",
      "唐又青",
      "唐雅容",
      "唐文昂",
      "唐雨,",
      "唐梓洁",
      "唐平绿",
      "唐之桃",
      "唐安琪",
      "唐红叶",
      "唐奥雅",
      "唐静秀",
      "唐问玉",
      "唐新荣",
      "唐云蔚",
      "唐香梅",
      "唐格菲",
      "唐芷蓝",
      "唐湛,",
      "唐蕤,",
      "唐星然",
      "唐思怡",
      "唐乐和",
      "唐怜南",
      "唐景龙",
      "唐德润",
      "唐诗柳",
      "唐麦冬",
      "唐惜雪",
      "唐虹彩",
      "唐海凡",
      "唐惠美",
      "唐哲,",
      "唐如曼",
      "唐斌,",
      "唐文德",
      "唐向真",
      "唐尔竹",
      "唐嘉怡",
      "唐和光",
      "唐子珍",
      "唐合瑞",
      "唐思嫒",
      "唐菁,",
      "唐艳芳",
      "唐芷荷",
      "唐琛瑞",
      "唐亦,",
      "唐彭泽",
      "唐承望",
      "唐翠梅",
      "唐笑槐",
      "唐泽,",
      "唐凡白",
      "唐初夏",
      "唐痴梅",
      "唐映菱",
      "唐陶然",
      "唐绮波",
      "唐含芙",
      "唐瑾瑜",
      "唐新洁",
      "唐水卉",
      "唐清莹",
      "唐芳华",
      "唐念云",
      "唐今雨",
      "唐翠巧",
      "唐寒天",
      "唐玉书",
      "唐思菱",
      "唐悠奕",
      "唐华奥",
      "唐兴思",
      "唐和璧",
      "唐诗丹",
      "唐暮雨",
      "唐昂熙",
      "唐桂枫",
      "唐凡雁",
      "唐宛筠",
      "唐弘量",
      "唐梦桃",
      "唐元绿",
      "唐家欣",
      "唐芮波",
      "唐蕴涵",
      "唐夏青",
      "唐春柔",
      "唐梓琬",
      "唐子亦",
      "唐芷云",
      "唐朝旭",
      "唐晴画",
      "唐和暖",
      "唐静秀",
      "唐乐成",
      "唐白风",
      "唐弘毅",
      "唐南莲",
      "唐宛丝",
      "唐夜云",
      "唐惜玉",
      "唐雨柏",
      "唐香天",
      "唐觅云",
      "唐梦菲",
      "唐霞飞",
      "唐水蓉",
      "唐千雁",
      "唐腾骞",
      "唐琳芳",
      "唐梦之",
      "唐紫雪",
      "唐安邦",
      "唐念雁",
      "唐鹏海",
      "唐雅静",
      "唐听枫",
      "唐乐松",
      "唐阳曦",
      "唐若菱",
      "唐幼菱",
      "唐灵松",
      "唐尔冬",
      "唐梦泽",
      "唐依白",
      "唐水儿",
      "唐莹莹",
      "唐依霜",
      "唐清妙",
      "唐山晴",
      "唐亦梅",
      "唐舒云",
      "唐罗绮",
      "唐鹏涛",
      "唐安彤",
      "唐职君",
      "唐恨蕊",
      "唐忆之",
      "唐嘉祯",
      "唐书白",
      "唐阳焱",
      "唐文栋",
      "唐海莹",
      "唐婉静",
      "唐运骏",
      "唐坚壁",
      "唐英锐",
      "唐娟妍",
      "唐骞仕",
      "唐元芹",
      "唐浩广",
      "唐红英",
      "唐又夏",
      "唐姝好",
      "唐雪萍",
      "唐布衣",
      "唐梦玉",
      "唐问玉",
      "唐悦畅",
      "唐野云",
      "唐以蕊",
      "唐向露",
      "唐晴霞",
      "唐如馨",
      "唐千凡",
      "唐岑,",
      "唐盼香",
      "唐婷美",
      "唐夏菡",
      "唐昕月",
      "唐凌兰",
      "唐高雅",
      "唐曼衍",
      "唐珍丽",
      "唐蔓菁",
      "唐胤,",
      "唐曼云",
      "唐霁,",
      "唐流丽",
      "唐明轩",
      "唐音仪",
      "唐静槐",
      "唐雁荷",
      "唐从丹",
      "唐听,",
      "唐鸿运",
      "唐琳瑜",
      "唐子丹",
      "唐平蓝",
      "唐余妍",
      "唐旭,",
      "唐炫,",
      "唐涵阳",
      "唐冷之",
      "唐贤淑",
      "唐傲云",
      "唐千柔",
      "唐晶辉",
      "唐火,",
      "唐念桃",
      "唐温瑜",
      "唐依秋",
      "唐正祥",
      "唐依美",
      "唐鸿羲",
      "唐博赡",
      "唐昆鹏",
      "唐蔼,",
      "唐清妍",
      "唐晓兰",
      "唐欣嘉",
      "唐念烟",
      "唐浩荡",
      "唐天逸",
      "唐平宁",
      "唐微婉",
      "唐叶吉",
      "唐蕙芸",
      "唐香巧",
      "唐碧曼",
      "唐芷若",
      "唐慕山",
      "唐梦影",
      "唐建明",
      "唐冬梅",
      "唐元亮",
      "唐白卉",
      "唐萦心",
      "唐睿达",
      "唐琇芳",
      "唐高,",
      "唐阳,",
      "唐锐阵",
      "唐心宜",
      "唐怜双",
      "唐鸿熙",
      "唐烨赫",
      "唐昊昊",
      "唐载,",
      "唐凡霜",

      "唐书白",
      "唐海凡",
      "唐韶敏",
      "唐建元",
      "唐碧蓉",
      "唐含巧",
      "唐弘图",
      "唐海冬",
      "唐璇子",
      "唐元蝶",
      "唐成文",
      "唐华美",
      "唐璎玑",
      "唐野雪",
      "唐亦玉",
      "唐曼安",
      "唐晗蕾",
      "唐歌阑",
      "唐怀玉",
      "唐静枫",
      "唐绮晴",
      "唐艳卉",
      "唐梦露",
      "唐妮子",
      "唐丁",
      "唐忆彤",
      "唐逸仙",
      "唐牧",
      "唐若云",
      "唐飞薇",
      "唐嘉悦",
      "唐颀秀",
      "唐菲",
      "唐又菡",
      "唐芳洁",
      "唐量",
      "唐幼仪",
      "唐雪莲",
      "唐芮悦",
      "唐昌勋",
      "唐隽",
      "唐天工",
      "唐丹南",
      "唐玉环",
      "唐嘉",
      "唐子楠",
      "唐碧菡",
      "唐雅可",
      "唐芙",
      "唐天蓝",
      "唐之",
      "唐雪巧",
      "唐访波",
      "唐承允",
      "唐喆",
      "唐熠",
    ];
    const Right = ref<string[]>(['选项1'])
    const mulitipleRight = ref<string[]>([])
    const methods = {
      //添加单选题选项
      addinput() {
        let len: number = data.options.length + 1
        data.options.push({
          label: "选项" + len,
          content: ''
        });
      },
      //删除单选题选项
      deleteinput() {
        data.options.splice(data.options.length - 1, 1);
      },
      //添加多选题选项
      addinputs() {
        data.options.push({
          label: "选项",
        });
      },
      //减少多选题选项
      deleteinputs() {
        data.options.splice(data.options.length - 1, 1);
      },
      //  randomNum(minNum:any, maxNum:any) {
      //   switch (arguments.length) {
      //     case 1:
      //       return parseInt(Math.random() * minNum + 1, 10);
      //       break;
      //     case 2:
      //       return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
      //       break;
      //     default:
      //       return 0;
      //       break;
      //   }
      // },
      // add() {
      //   ElMessageBox.confirm("确定要随机新增500条吗?").then(() => {
      //     for (var i = 0; i < 5; i++) {
      //       setTimeout(() => {
      //         methods.add();
      //       }, 1000);
      //     }
      //   });
      // },
      //保存单选题
      Rsave() {
        data.loading = true;
        let options: any = [];
        data.from.option.forEach((el: any) => {
          options.push({
            ocontent: el,
            oisright: 0
          });
        });
        let questions = [
          {
            qcontent: data.from.Rname,
            qlv: data.from.Rtestlv,
            qexplain: data.from.Rdescribe,
            qisCheck: 0,
            qtype: 1,
            qlable: data.from.Rtype,
            option: data.from.option,
          },
        ];
        question.AddQuestion(questions).then((res: any) => {
          data.loading = false;
          if (res.code === 0) {
            ElMessageBox.confirm("还要继续添加嘛")
              .then((e) => {
                ElMessage.success(res.message);
              })
              .catch((r) => {
                ElMessage.success(res.message);
                router.push("/test");
              });
          } else {
            ElMessage.error(res.message);
          }
        });
        // let questions = [];
        // for (var i = 0; i < 50; i++) {
        //   let content = "";
        //   let options = [];
        //   for (var j = 0; j < 4; j++) {
        //     let ocontent = "";
        //     ocontent =
        //       nameList[methods.randomNum(0, nameList.length - 1)] +
        //       methods.randomNum(0, 4);
        //     options.push({
        //       oContent: ocontent,
        //       oIsRight: j == 2 ? 1 : 0,
        //     });
        //   }
        //   content =
        //     nameList[methods.randomNum(0, nameList.length - 1)] +
        //     "你认识吗？" +
        //     methods.randomNum(1, 1000);
        //   questions.push({
        //     qcontent: content,
        //     qisCheck: 0,
        //     qexplain: "abc",
        //     qlv: methods.randomNum(1, 10),
        //     qanswer: "",
        //     qlable:".Net",
        //     qtype:1,
        //     option: options,
        //   });
        // }
        // question.AddQuestion(questions).then((res: any) => {
        //   if (res.code == 0) {
        //     ElMessage.success(res.message);
        //   } else {
        //     ElMessage.error(res.message);
        //   }
        // });
        

      },
      //保存多选题
      Csave() {
        data.loading = true;
        let options: any = [];
        data.from.option2.forEach((el: any) => {
          options.push({
            ocontent: el,
            oisright: 0
          });
        });
        let questions = [
          {
            qcontent: data.from.Cname,
            qlv: data.from.Ctestlv,
            qexplain: data.from.Cdescribe,
            qisCheck: 0,
            qtype: 2,
            qlable: data.from.CType,
            option: data.from.option2,
          },
        ];
        question.AddQuestion(questions).then((res: any) => {
          data.loading = false;
          if (res.code === 0) {
            ElMessageBox.confirm("还要继续添加嘛")
              .then((e) => {
                ElMessage.success(res.message);
              })
              .catch((r) => {
                ElMessage.success(res.message);
                router.push("/test");
              });
          } else {
            ElMessage.error(res.message);
          }
        });
      },
      //保存问答题
      Esave() {
        let questions = [
          {
            qcontent: data.from.Ename,
            qlv: data.from.Etestlv,
            qexplain: data.from.Edescribe,
            qisCheck: 1,
            qtype: 3,
            qlable: data.from.EType,
            qanswer: data.from.answer,
            qanalysi:data.from.analysis
          },
        ];
        question.AddQuestion(questions).then((res: any) => {
          data.loading = false;
          if (res.code === 0) {
            ElMessageBox.confirm("还要继续添加嘛")
              .then((e) => {
                ElMessage.success(res.message);
              })
              .catch((r) => {
                ElMessage.success(res.message);
                router.push("/test");
              });
          } else {
            ElMessage.error(res.message);
          }
        });
      },
      //单选
      Change(val: any) {
        data.options.forEach((el: any) => {
          let obj: IOption = {
            ocontent: el.content
          }
          if (el.label == val) {
            obj.oisRight = 1
          } else {
            obj.oisRight = 0
          }
          data.from.option.push(obj)
        })
      },
      //多选
      Changes(val: any) {
        data.from.option2 = []
        data.multipleoptions.forEach((el: any) => {
          let obj: IOption = {
            ocontent: el.content
          }
          if (val.indexOf(el.label) > -1) {
            obj.oisRight = 1
          } else {
            obj.oisRight = 0
          }
          data.from.option2.push(obj)
        })
      },
    };
    onMounted(() => {
      data.Loadings = false
    });
    return {
      ...toRefs(data),
      ...methods,
      Right,
      mulitipleRight
    };
  },
});
</script>
<style scoped>
/* .box {
  background-color: azure;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 20px;
  width: 100%;
  height: 100%;
  padding-top: 10px;
} */
.crumbs {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 20px;
  margin: 15px;
  background-color: white;
  width: 94%;
}

.testadd {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 20px;
  margin: 15px;
  background-color: white;
  width: 94%;
}

.title {
  font-size: 20px;
  margin: 10px;
}

.btn {
  margin: 5px;
  float: right;
}

.add {
  margin-left: 90%;
  display: inline-block;
}
</style>
